<template>
    <div class="coupon">
        <div class="top-title">
            <img src="../../images/common/icon-back.png" @click="goback">
            <p class="tc">优惠券</p>
        </div>

        <div class="nav fx-spb">
            <div class="active">
                <span>未使用(<label>10</label>)</span>      
            </div>
            <div>
                <span>使用记录(<label>43</label>)</span> 
            </div>
            <div>
                <span>已过期(<label>43</label>)</span> 
            </div>
        </div>

        <div class="content">
            <div class="not-use">
                <ul>
                    <li class="fx-spb">
                        <div class="bg-img">
                            <p class="money">￥<span>100</span></p>
                            <p class="full-money">满<span>129</span>元可用</p>
                        </div>
                        <div class="coupon-info fx-col-spb">
                            <div class="fx-jcfs img-coupon">
                                <img src="../../images/index/icon-coupon2.png">
                                <p>部分商品使用</p>
                            </div>
                            <div class="fx-spb date">
                                <span>2019.1.12-2019.12.12</span>
                                <button>立即使用</button>
                            </div>
                            <div class="fx-spb detail">
                                <span>详细信息</span>
                                <img src="../../images/index/icon-up.png">
                            </div>
                        </div>
                    </li>
                    <li class="fx-spb">
                        <div class="bg-img">
                            <p class="money">￥<span>100</span></p>
                            <p class="full-money">满<span>129</span>元可用</p>
                        </div>
                        <div class="coupon-info fx-col-spb">
                            <div class="fx-jcfs img-coupon">
                                <img src="../../images/index/icon-coupon2.png">
                                <p>部分商品使用</p>
                            </div>
                            <div class="fx-spb date">
                                <span>2019.1.12-2019.12.12</span>
                                <button>立即使用</button>
                            </div>
                            <div class="fx-spb detail">
                                <span>详细信息</span>
                                <img src="../../images/index/icon-up.png">
                            </div>
                        </div>
                    </li>
                    <li class="fx-spb">
                        <div class="bg-img">
                            <p class="money">￥<span>100</span></p>
                            <p class="full-money">满<span>129</span>元可用</p>
                        </div>
                        <div class="coupon-info fx-col-spb">
                            <div class="fx-jcfs img-coupon">
                                <img src="../../images/index/icon-coupon2.png">
                                <p>部分商品使用</p>
                            </div>
                            <div class="fx-spb date">
                                <span>2019.1.12-2019.12.12</span>
                                <button>立即使用</button>
                            </div>
                            <div class="fx-spb detail">
                                <span>详细信息</span>
                                <img src="../../images/index/icon-up.png">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="record">

            </div>
            <div class="expired">

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() { 
        return {

        }
    },
    methods: {
        goback(){
            this.$router.go(-1);
        }
    }
}
</script>

<style lang="scss" scoped>
.coupon{
    .nav{
        height: 2rem;
        padding-top: 1rem;
        border-bottom: 1px solid #ccc;
        div{
            width: 33.33%;
            span{
                display: block;
                height: 1rem;
                line-height: 1rem;
                text-align: center;
            }
        }
        .active{
            color: #FF5D45;
            position: relative;
        }
        .active::after{
            content: '';
            display: inline-block;
            height: 0.04rem;
            width: 1rem;
            background-color: #FF5D45;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
        }
    }
    .content{
        padding: 0.4rem 0.2rem;
        li{
            margin-bottom: 0.2rem;
        }
        .bg-img{
            width: 2.2rem;
            height: 1.8rem;
            background: url('../../images/index/icon-red.png') no-repeat;
            background-size: 100% 100%;
            p{
                text-align: center;
                color: #fff;
            }
            .money{
                font-size: 0.36rem;
                height: 1.2rem;
                padding-top: 0.2rem;
                span{
                    font-size: 0.7rem;
                }
            }
            .full-money{
                font-size: 0.24rem;
            }
        }
        .coupon-info{
            width: calc(100% - 2rem);
            padding: 0 0.2rem;
            border: 1px solid #EEEFF0;
            div{
                height: 0.6rem;
                line-height: 0.6rem;
                align-items: center;
            }
            .img-coupon{
                img{
                    width: 0.7rem;
                    height: 0.3rem;
                    margin-right: 0.2rem;
                }
                p{
                    color: #666666;
                }
            }
            .date{
                border-bottom: 1px dashed #EFF1F4;
                span{
                    font-size: 0.2rem;
                    color: #999999;
                }
                button{
                    width: 1.2rem;
                    height: 0.42rem;
                    font-size: 0.22rem;
                    color: #FB7D7D;
                    border: 1px solid #FB7D7D;
                    border-radius: 0.3rem;
                }
            }
            .detail{
                span{
                    color: #999999;
                }
                img{
                    width: 0.3rem;
                    height: 0.3rem;
                }
            }
        }
        li{
            height: 1.8rem ;
        }
    }
}
</style>